import { defineComponent, ref } from "vue";
import style from "./index.module.less";
import { menuGroupProps } from "./types";
import check from "./asset/check.png";
import { IFilterMenuOptions } from "../../types";
export default defineComponent({
  name: "",
  props: menuGroupProps,
  emits: ["change"],
  setup(props, { emit }) {
    const getValue = () => {
      if (props.value) {
        return props.value.split(",");
      } else {
        return [];
      }
    };
    const values = ref(new Set(getValue()));
    const onSelect = (item: IFilterMenuOptions) => {
      if (values.value.has(item.value)) {
        values.value.delete(item.value);
      } else {
        values.value.add(item.value);
      }
      emit("change", Array.from(values.value).join(","));
    };
    return () => {
      return (
        <div class="flex flex-col border-bottom-color px-[15px]">
          {props.data.map((e) => {
            return (
              <div
                class="h-[50px] flex flex-row-reverse items-center justify-between"
                onClick={() => onSelect(e)}
              >
                <div class="w-[20px] h-[20px]">
                  {values.value.has(e.value) && (
                    <img src={check} class="w-[20px] h-[20px]" />
                  )}
                </div>
                <div class="text-[#333333] text-[15px]">{e.text}</div>
              </div>
            );
          })}
        </div>
      );
    };
  },
});
